<template>
  <div class="home">
    <div class="apply-for-form"> 
      <van-form @submit="applyForSubmit">
         <div class="form-input">
           <van-cell-group>
            <img width="25" height="25" src="../../assets/images/zry/qiye.png" />
            <van-field class="form-field" v-model="name" label-width="7em" label="企业名称：" placeholder="必填，请输入" input-align="right" @input="seach"/>
            <van-action-sheet v-model="show" cancel-text="取消"  close-on-click-action>
              <van-list
                v-model="loading"
                :finished="finished"
                finished-text="天眼查没有更多了"
              >
                <van-cell-group :title="item.groupName" v-for="item in list" :key="item.id" @click="trigger(item.id)">
                <van-cell :key="item.id" :title="item.title" :label="item.label"/>
                </van-cell-group>
              </van-list>
            </van-action-sheet>
           </van-cell-group>
         </div>
         <div class="form-input">
           <van-cell-group>
            <img width="25" height="25" src="../../assets/images/zry/qian.png" />
            <van-field class="form-field" v-model="money" label-width="9em" label="含税设备采购金额：" type="number" placeholder="万元" input-align="right"/>
           </van-cell-group>
         </div>
         <div class="form-input">
           <van-cell-group>
            <img width="25" height="25" src="../../assets/images/zry/dizhi-1.png" />
            <van-field class="form-field" v-model="location" label-width="7em" label="企业所在地：" placeholder="必填，请输入" input-align="right"/>
           </van-cell-group>
         </div>
         <div class="form-input">
            <van-cell-group>
           <img width="25" height="25" src="../../assets/images/zry/dizhi-2.png" />
           <van-field class="form-field" v-model="address" label-width="7em" label="详细地址：" placeholder="非必填" input-align="right"/>
           </van-cell-group>
         </div>
         <div class="form-input">
           <van-cell-group>
           <img width="25" height="25" src="../../assets/images/zry/lianxiren.png" />
           <van-field class="form-field" v-model="contact" label-width="7em" label="企业联系人：" placeholder="必填，请输入" input-align="right"/>
             </van-cell-group>
         </div>
         <div class="form-input">
           <van-cell-group>
           <img width="25" height="25" src="../../assets/images/zry/dianhua.png" />
           <van-field class="form-field" v-model="phone" label-width="7em" label="联系电话：" type="number" maxlength="12" placeholder="必填，请输入" input-align="right"/>
             </van-cell-group>
         </div>
        <van-button class="form-button" type="info" block native-type="submit"></van-button>
      </van-form>
    </div>
  </div>
</template>

<script>
  import { Form, Button, Field, Cell, CellGroup, ActionSheet, List  } from 'vant'
  export default {
    name: 'ZryFillIn',
    data() {
      return {
        name: '',
        money: '',
        location: '',
        address: '',
        contact:'',
        phone: '',
        show: false,
        companyArray: [],
        companyInfo: '',
        list: [],
        loading: false,
        finished: false
      }
    },
    components: {
      'van-form': Form,
      'van-cell-group': CellGroup,
      'van-action-sheet': ActionSheet,
      'van-list' : List,
      'van-cell': Cell,
      'van-field': Field,
      'van-button': Button
    },
    methods: {
      seach () {
        this.show = true;
        this.getMessage()
      },
      applyForSubmit(){
        if (this.name && this.money && this.location && this.contact && this.phone) {
          if (this.phone.length === 11 || this.phone.length === 12) {
            this.$tools.loading('提交中...')
            var parm = {
              eventId: "2",
              name: this.name.toString(),
              companyInfo: this.companyInfo,
              advanceAmount: this.money.toString(),
              address: this.location.toString(),
              address_detail: this.address.toString(),
              contact: this.contact.toString(),
              phone: this.phone.toString(),
              spreadUserId: localStorage.getItem('spreadUserId')
            }
            var url = this.HOME + 'api/h5/EqxiuVisit/apply';
            this.$axios({
              method: 'post',
              url: url,
              data: {entity:parm}
            }).then((res) => {
              if (res.data.code === 200) {
                this.$tools.closeLoading()
                this.$router.push({ path: '/zry/ZryResult' }) 
              }
            }).catch((err) => {
              this.$toast.fail('网络异常')
            }) 
          } else {
            this.phone = "";
            this.$toast.fail('联系方式不正确请重新输入')
          }
        } else {
           this.$toast.fail('数据有缺失项，请补全在提交')
        }
      },
      getMessage () {
        var that = this
        that.loading = true
        that.list = []
        var url = this.HOME + 'api/h5/EqxiuVisit/queryCompanyInfoByName?name=' + this.name;  //HOME变量为已挂载的可跨域域名，这里将其拼接完，成为一个完整路径
        this.$axios({  //this代表vue对象，之前在入口文件中把axios挂载到了vue中，所以这里直接用this.$axios调用axios对象
          method: 'get',
          url: url,
        }).then((res) => {
          if (res.data.code === 200) {
            var resultData = res.data.data.result.items;
            that.companyArray = resultData
            for (var i=0; i<resultData.length; i++) {
              var str = resultData[i].name
              str = str.replace(/<em>/g,'')
              str = str.replace(/<\/em>/g,'')
              var json = {
                id: i,
                groupName: '企业名称：' + str,
                title: '法人：' + resultData[i].legalPersonName, 
                label: '注册时间：' + resultData[i].estiblishTime
              }
              that.list.push(json)
            }
            that.loading = false;
            that.finished = true;
          }
        }).catch((err) => {
          console.log(err);
        })
      },
      trigger(index) {
        var groupName = this.list[index].groupName
        this.name = groupName.split('：')[1]
        this.companyInfo = JSON.stringify(this.companyArray[index])
        this.show = false;
      }
    }
  }
</script>

<style lang="less" scoped>
  .home {
    background: url("../../assets/images/zry/b2.png") no-repeat 100% 0;
    background-size: 100%;
    .apply-for-form {
      padding-top: 50px;
      .form-input {
        width: 94%;
        height: 40px;
        background: #ffffff;
        border-radius: 8px;
        margin: 0 auto;
        margin-bottom: 15px;
        overflow: hidden;
        border: 1px solid #dcdfe6;
        img {
          margin-left: 12px; 
          padding-top: 7px;
          vertical-align: middle; 
        }
        .form-field {
          padding: 10px 0px;
          left: 48px;
          top: -33px;
          width: 80%;
        }
      }
      .form-button {
        width: 98%;
        margin: 0 auto;
        margin-top: 2.1rem;
        background: url('../../assets/images/zry/btn-2.png') no-repeat 50% 50%;
        background-size: 100%;
        border: none;
      }
    }
  }
</style>
